/**
 * Created by hejg on 2018/5/11.
 */
import React, {Component} from 'react';
import {TouchableOpacity, StyleSheet, Alert, View, Text, StatusBar, AsyncStorage, Image} from 'react-native';
import PasswordGesture  from 'react-native-gesture-password';
import DeviceInfo from 'react-native-device-info';
import Indicator from '../../../components/Indicator';
import Style from '../../../components/Style';
import Tool from '../../../components/Tool';

class UserInfo extends Component {
    render() {
        return (
            <View style={{alignItems:'center'}}>
                <Image source={require('./../../../assets/base/head.jpg')}
                       style={{width:60,height:60,borderRadius:30,marginBottom:5}}/>
                <Text style={{fontSize:Style.fontSize.normal,color:Style.color.black}}>
                    {this.props.user.a4Name + '(' + this.props.user.a4Code + ')'}
                </Text>
            </View>);
    }
}

export default class GesturePassword extends Component {
    static navigationOptions = {
        header: null
    };

    constructor(props) {
        super(props);
        this.gestureCode = '';
        this.state = {
            message: '请输入您的登陆手势密码.',
            status: 'normal',
            user: {},
            indicator: {visible: false, message: ''}//控制遮罩层
        };
        let _this = this;
        AsyncStorage.multiGet([Tool.storageConst.userKey, Tool.storageConst.gestureKey], (error, results) => {
            if (results[0][1]) {
                try {
                    _this.setState({user: JSON.parse(results[0][1])});
                } catch (err) {

                }
            }
            _this.password = results[1][1];
        });
    }

    onEnd(password) {
        if (password === this.password) {
            this.setState({
                status: 'right',
                message: '您的手势密码输入正确.'
            });
            //记录用户登陆日志并验证系统版本
            let appLoginLog = {
                loginAddress: '',
                appVersion: '1.3.5',
                deviceImei: DeviceInfo.getSerialNumber(),
                deviceModel: DeviceInfo.getModel(),
                deviceVendor: DeviceInfo.getBrand(),
                deviceUUID: DeviceInfo.getUniqueID(),
                networdInfo: DeviceInfo.getCarrier(),
                osLanguage: DeviceInfo.getDeviceLocale(),
                osVersion: DeviceInfo.getSystemVersion(),
                osName: DeviceInfo.getSystemName(),
                osVendor: DeviceInfo.getManufacturer(),
                launchLoaded: ''
            };
            let _this = this;
            _this.setState({indicator: {visible: true, message: ''}});
            Tool.fetchJson(Tool.appPath.mkst + 'login/gestureCipherLogin', JSON.stringify(appLoginLog), function (data) {
                if (data.state) {
                    _this.props.navigation.navigate('Main');
                }
            }, function () {

            }, function () {
                _this.setState({indicator: {visible: false, message: ''}});
            });
        } else {
            this.setState({
                status: 'wrong',
                message: '手势密码输入错误,请重试.'
            });
        }
    }

    onStart() {
        this.setState({
            status: 'normal',
            message: '请输入您的登陆手势密码.'
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar backgroundColor={Style.color.white} barStyle="dark-content"/>
                <View style={{height:30}}></View>
                <PasswordGesture
                    style={{backgroundColor:Style.color.white}}
                    textStyle={{fontSize:16,paddingTop:130}}
                    status={this.state.status}
                    message={this.state.message}
                    normalColor={Style.color.gray}
                    rightColor={Style.color.green}
                    wrongColor={Style.color.red}
                    interval={600}
                    children={<UserInfo user={this.state.user}/>}
                    onStart={() => this.onStart()}
                    onEnd={(password) => this.onEnd(password)}
                    outerCircle={false}
                />
                <TouchableOpacity style={{padding:20,alignItems:'flex-end'}}
                                  onPress={()=> this.props.navigation.navigate('Auth')}>
                    <Text style={styles.forgetPassword}>忘记手势密码</Text>
                </TouchableOpacity>
                <Indicator isVisible={this.state.indicator.visible} message={this.state.indicator.message}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Style.color.white
    },
    forgetPassword: {
        color: Style.color.red,
        fontSize: Style.fontSize.normal
    }
});